<template>
  <div class="student-container">
    <div class="top-info">
      <SearchCmp v-if="searchCmpArray.length && departTree.value != []" :searchCmpArray="searchCmpArray" :searchForm="queryData"  @onSubmit="getTableData" />
    </div>
    <RuifoxTable
      v-loading="tableLoading"
      :table-data="tableData"
      :field-list="fieldList"
      :default-index="true"
      :default-checkbox="true"
      :lazy="true"
    >
      <template #default-checkbox="{ element }">
        <div class="table-div-check">
          <el-checkbox
            class="unmover"
            v-model="element.checked"
            @change="handleCheckTable(element.id)"
            size=""
          />
        </div>
      </template>
      <!-- 状态  -->
      <template #state="{ element }"> 
        <div>
          <el-tag v-if="element.state == 0" type="primary">正常</el-tag>
          <el-tag v-else type="success" >禁用</el-tag>
        </div>
      </template>
      
      <!-- 身份认证  -->
      <template #identificationVerify="{ element }"> 
        <div>
          <el-tag v-if="element.identificationVerify == true" type="primary">已认证</el-tag>
          <el-tag v-else type="warning">未认证</el-tag>
        </div>
      </template>
      <!-- 有效时间  -->
      <template #effectiveTime="{ element }" >
        <div class="item-info" v-if="element.effectiveTime && element.effectiveTime != 0">{{ formatDate(element.effectiveTime,"yyyy-MM-dd") }}</div>
      </template>

      <template #options="{ element }">
        <div class="table-td-option unmover">
          <el-button
            type="primary"
            link
            @click="showDrawer(element)"
          >
            编辑
          </el-button>
          <!-- <el-button
            type="danger"
            link
            @click="remove(element)"
          >
            删除
          </el-button> -->
        </div>
      </template>
    
    </RuifoxTable>
    <PaginationView
      :isAffix = "false"
      :total="queryData.total"
      :pageSize="queryData.pageSize"
      :currentPage="queryData.currentPage"
      :allChoose="isAllChooseBtn"
      :pageChoose="isPageChooseBtn"
      :options="batchOptions"
      :checkedNum="checkedNum"
      :canChoose="queryData.total > 0"
      @changeSize="handleSizeChange"
      @currentChange="handleCurrentChange"
      @changePageChoose="handlePageChoose"
      @changeAllChoose="handleAllChoose"
      @invertChoose="handleInvertChoose"
      @checkOption="handleBatchOptions"
      @refreshList="getTableData"
      @cancelChoose="handleResetPagination"
      v-if="tableData.length > 0"
    />
  </div>
</template>
<script setup>
import { ref, reactive, onMounted } from 'vue'
import { pagingUser } from '@/api/student'
import { tableList as mixTable } from '@ruifox-cms/utils'
import { formatDate } from '@/utils/tools'
import { getDepartTree } from "@/api/depart";
import { pagingGroup } from "@/api/group";

const props = defineProps({
  departId: {
    type: String,
    default: ""
  },
  cohortId: {
    type: Number,
    default: 0
  },
  notInCourseInstanceIds: {
    type: String,
    default: ""
  }
})

const {
  queryData,
  tableData,
  tableLoading,
  checkedNum,
  isAllChooseBtn,
  isPageChooseBtn,
  checkedList,
  // isAllSearch,
  getTableData,
  // handleSearch,
  handleCurrentChange,
  handleSizeChange,
  handlePageChoose,
  handleAllChoose,
  handleInvertChoose,
  handleCheckTable,
  handleResetPagination,
} = mixTable({
  getListApi: pagingUser,
});
const defaultQuery = reactive({
  currentPage: 1,
  pageSize: 10,
  sort: "",
  order: "",
  realName: "",
  identificationNumber: "",
  joinTime: "",
  effectiveTime: "",
  cohortIds: [],
  departIds: [],
  inCourseIds: [],
  inCourseInstanceIds: [],
  notInCourseIds: [],
  notInCourseInstanceIds: [props.notInCourseInstanceIds]
});

Object.assign(queryData, defaultQuery);

if(props.departId){
  queryData.departIds = [props.departId];
}
if(props.cohortId){
  queryData.cohortIds = [props.cohortId];
}
console.log("queryData",queryData);

//获取部门树
const departTree = ref([]);
const transformData = (data) => {
  return data.map(item => {
    const transformedItem = {
      value: item.id,
      label: item.name
    };

    if (item.children && item.children.length > 0) {
      transformedItem.children = transformData(item.children);
    }

    return transformedItem;
  });
};
const getDepartData = async () => {
  const res = await getDepartTree({departId: "root"});
  if (res.code === 20000) {
    departTree.value = transformData(res.data.children)
    searchCmpArray.value[1].options = departTree.value    
  }
};


//获取分组
const groupList = ref([])
const getGroupData = async () => {
  const res = await pagingGroup({ 
    currentPage: 1,
    pageSize: 100
  });
  groupList.value = res.data.list;
  let newList = groupList.value.map(item => ({
      value: item.id,
      label: item.name,
    }));
  searchCmpArray.value[2].options = newList
};


const orderOption = ref([
  { label: "正序", value: 0 },
  { label: "倒序", value: 1 },
]);

const searchCmpArray = ref([
  { label: '按名称搜索', key: 'realName'},
  { label: '部门', key: 'departIds', form_type: 'cascader', options: departTree.value },
  { label: '群组', key: 'cohortIds', form_type: 'select', options: groupList.value,  props: { label: 'name', value: 'id' }},
  { label: '排序', key: 'sort', form_type: 'select', options: orderOption.value }
])

//表格展示字段
const fieldList = ref([
  {
    title: "姓名",
    name: "realName",
  },
  // {
  //   title: "昵称",
  //   name: "name",
  // },
  // {
  //   title: "身份证号",
  //   name: "identificationNumber",
  // },
  {
    title: "手机号",
    name: "account",
  },
  {
    title: "部门",
    name: "departName",
  },
  {
    title: "群组",
    name: "groupId",
  },
  {
    title: "状态",
    name: "state",
  },
  {
    title: "身份认证",
    name: "identificationVerify",
  },
  {
    title: "有效时间",
    name: "effectiveTime",
  },
  {
    title: "操作",
    name: "options",
    width: 150,
  },
]);

const returnStudent = () => {
  return checkedList.value
}

// 暴露方法给父组件
defineExpose({
  returnStudent,
})

onMounted(async() => {
  await getDepartData();
  await getGroupData();
  await getTableData();
});
</script>
<style lang="scss" scoped>
.top-info{
  margin-bottom: 20px;
}

</style>